<template>
	<view class="container">
		<view class="display-container">
			<text class="red_ball">{{ball1}}</text>
			<text class="red_ball">{{ball2}}</text>
			<text class="red_ball">{{ball3}}</text>
			<text class="red_ball">{{ball4}}</text>
			<text class="red_ball">{{ball5}}</text>
			<text class="red_ball">{{ball6}}</text>
			<text class="blue_ball">{{ball7}}</text>
		</view>

		<view class="button-container">
			<view class="button-start" @click="startOrPauseTimer">
				<text class="button-text">{{startPauseButtonText}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	var interval = 0;
	var isStarted = false;
	export default {
		data() {
			return {
				startPauseButtonText: '开始',
				ball1: '15',
				ball2: '15',
				ball3: '15',
				ball4: '15',
				ball5: '15',
				ball6: '15',
				ball7: '15'
			}
		},
		methods: {
			startOrPauseTimer() {
				if (isStarted) {
					clearInterval(interval);
					this.startPauseButtonText = '开始'
				} else {
					this.startPauseButtonText = '暂停'

					interval = setInterval(() => {
						this.ball1 = this.getRandom(33)
						this.ball2 = this.getRandom(33)
						this.ball3 = this.getRandom(33)
						this.ball4 = this.getRandom(33)
						this.ball5 = this.getRandom(33)
						this.ball6 = this.getRandom(33)
						this.ball7 = this.getRandom(16)
					}, 100);
				}

				isStarted = !isStarted;
			},

			getRandom(maxNum) {
				return Math.floor(Math.random() * maxNum) + 1
			},
		}
	}
</script>

<style>
	.display-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 50rpx;
	}

	.red_ball {
		color: white;
		font-size: 1.5em;
		background-color: #CE0000;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blue_ball {
		color: white;
		font-size: 1.5em;
		background-color: #489cf5;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-container {
		display: flex;
		flex: 1;
		justify-content: space-around;
		padding-top: 400rpx;
	}

	.button-start {
		color: white;
		background-color: #489cf5;
		height: 170rpx;
		width: 170rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-text {
		font-size: 1.5em;
		font-weight: 400;
	}
</style>